<template>
  <div class="limiter">
    <div
      class="container-login100"
      style="background-image: url('/assets/images/img-01.jpg')"
    >
      <div class="wrap-login100 p-t-190 p-b-30">
        <van-form @submit="register" class="login100-form validate-form">
          <div class="login100-form-avatar">
            <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
          </div>

          <span class="login100-form-title p-t-20 p-b-45">Hello Register</span>

          <div
            class="wrap-input100 validate-input m-b-10"
            data-validate="请输入邮箱"
          >
            <input
              class="input100"
              type="email"
              name="email"
              placeholder="邮箱"
              autocomplete="off"
              v-model="formData.email"
            />
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-envelope"></i>
            </span>
          </div>

          <div
            class="wrap-input100 validate-input m-b-10"
            data-validate="请输入昵称"
          >
            <input
              class="input100"
              type="text"
              name="nickname"
              placeholder="昵称"
              autocomplete="off"
              v-model="formData.nickname"
            />
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-user"></i>
            </span>
          </div>

          <div
            class="wrap-input100 validate-input m-b-10"
            data-validate="请输入密码"
          >
            <input
              class="input100"
              type="password"
              name="pass"
              placeholder="密码"
              v-model="formData.pass"
            />
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>

          <div class="container-login100-form-btn p-t-10">
            <button class="login100-form-btn">注 册</button>
          </div>

          <div class="text-center w-full">
            <router-link class="txt1" to="/user/base/login">
              立即登录
              <i class="fa fa-long-arrow-right"></i>
            </router-link>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      formData: {
        email: "",
        pass: "",
        nickname: "",
      },
    };
  },
  methods: {
    register() {
      if (this.formData.email === null || this.formData.email === "") {
        this.$notify({
          type: "warning",
          message: "邮箱不能为空",
          duration: 1000,
        });
        return false;
      }
      if (this.formData.pass === null || this.formData.pass === "") {
        this.$notify({
          type: "warning",
          message: "密码不能为空",
          duration: 1000,
        });
        return false;
      }
      if (this.formData.nickname === null || this.formData.nickname === "") {
        this.$notify({
          type: "warning",
          message: "昵称不能为空",
          duration: 1000,
        });
        return false;
      }
      // 正则
      let EmailReg =
        /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;

      if (!EmailReg.test(this.formData.email)) {
        this.$notify({
          type: "warning",
          message: "邮箱格式错误,请重新输入",
          duration: 1000,
        });
        return false;
      }

      this.$toast.loading({
        message: "注册中...",
        forbidClick: true,
        duration: 1000,
        onClose: async () => {
          // 封装数据
          let res = await this.$api.register({ data: this.formData });

          console.log(res);
          // return false;
          if (res.code === 1) {
            this.$notify({
              type: "success",
              message: res.msg,
              duration: 1500,
              onClose: () => {
                this.$router.push(res.url);
              },
            });
          } else {
            this.$notify({ type: "danger", message: res.msg, duration: 1500 });
          }
        },
      });
    },
  },
};
</script>

<style scoped>
@import url("/assets/css/util.css");
@import url("/assets/css/main.css");
</style>
